<%
# Copyright (C) 2011 - present Instructure, Inc.
#
# This file is part of Canvas.
#
# Canvas is free software: you can redistribute it and/or modify it under
# the terms of the GNU Affero General Public License as published by the Free
# Software Foundation, version 3 of the License.
#
# Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
# A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
# details.
#
# You should have received a copy of the GNU Affero General Public License along
# with this program. If not, see <http://www.gnu.org/licenses/>.
%>

<%
  js_bundle :speed_grader
  css_bundle :speed_grader
  js_env({
    :RUBRIC_ASSESSMENT => {
      :assessor_id => @current_user.id.to_s,
      :assessment_type => can_do(@assignment, @current_user, :grade) ? "grading" : "peer_review"
    }
  })
  @show_left_side = false
  @show_embedded_chat = false
  @body_classes << 'ic-no-flex-layout full-width'
  @can_edit_anything = !@context.completed?
%>
<% content_for :page_title, t(:page_title, "%{assignment_name}, SpeedGrader, %{course_name}", :assignment_name => @assignment.title, :course_name => @context.name) %>
<div id="speed_grader_timeout_alert"></div>
<h4 id="speed_grader_loading">
  {{#t}}loading...{{/t}}
</h4>
<h1 class="screenreader-only">{{#t}}SpeedGrader{{/t}}</h1>
<div id="gradebook_header_container">
  <%= form_tag({ :controller => :gradebooks, :course_id => @context.id, :action => :update_submission }) do %>
  <div id="gradebook_header" class="subheadContent" style="display:none;">
    <div class="subheadContent subheadContent--flex-start">
      <div id="speedgrader-icons" class="gradebookActions">
        <a href="<%= polymorphic_url([@context, 'gradebook']) %>" id="speed_grader_gradebook_link" class="Button Button--icon-action gradebookActions__Button gradebook-icon-link" title="{{#t}}Gradebook{{/t}}">
          <i class="icon-gradebook" aria-hidden="true"></i>
          <span class="screenreader-only" aria-hidden="true">{{#t}}Gradebook{{/t}}</span>
        </a>
        <button type="button" data-muted="<%= @assignment.muted? %>" id="mute_link" class="Button Button--icon-action gradebookActions__Button" title="{{#t}}Mute/Unmute Assignment{{/t}}">
          <i class=<%= @assignment.muted? ? "icon-muted" : "icon-unmuted"  %> aria-hidden="true"></i>
          <span class="screenreader-only" aria-hidden="true">
            <%= @assignment.muted? ? t("Unmute Assignment") : t("Mute Assignment") %>
          </span>
        </button>
        <button id="keyboard-shortcut-info-icon" class="Button Button--icon-action gradebookActions__Button" type="button" title="{{#t}}Keyboard Shortcuts{{/t}}">
          <i class="icon-keyboard-shortcuts" aria-hidden="true"></i>
          <span class="screenreader-only" aria-hidden="true">{{#t}}Keyboard Shortcuts{{/t}}</span>
        </button>
        <% if help_link %>
          <%= link_to help_link_url,
                class: help_link_classes(["Button Button--icon-action gradebookActions__Button exclude_external_icon"]),
                title: help_link_name,
                data: help_link_data do %>
            <span class="gradebookActions__Svg" role="presentation">{{#svg_icon}}help_link_icon{{/svg_icon}}</span>
            <span class="screenreader-only" aria-hidden="true"><%= help_link_name %></span>
          <% end %>
        <% end %>
        <button id="settings_link" class="Button Button--icon-action gradebookActions__Button" type="button" title="{{#t}}Settings{{/t}}">
          <i class="icon-settings" aria-hidden="true"></i>
          <span class="screenreader-only" aria-hidden="true">{{#t}}Speedgrader Settings{{/t}}</span>
        </button>
      </div>
      <div class="assignmentDetails">
        <a id="assignment_url" href="<%= context_url(@context, :context_assignment_url, @assignment.id) %>">
          <h2 class="assignmentDetails__Title"><%= @assignment.title %></h2>
        </a>
        <p class="assignmentDetails__Info">
          <span tabindex="0"><%= translated_due_date(@assignment) %></span>
          - <a id="context_title" href="<%= context_url(@context, :context_url) %>"><%= @context.short_name %></a>
        </p>
      </div>
    </div>
    <div class="subheadContent subheadContent--flex-end">
      <div class="statsMetric">
        <div class="statsMetric__Item" tabindex="0">
          <div class="statsMetric__Item-value" id="x_of_x_graded"></div>
          <div class="statsMetric__Item-label">{{#t}}Graded{{/t}}</div>
        </div>
        <div id="average-score-wrapper" class="statsMetric__Item" tabindex="0">
          <div class="statsMetric__Item-value" id='average_score'>0.0</div>
          <div class="statsMetric__Item-label">{{#t}}Average{{/t}}</div>
        </div>
        <div class="statsMetric__Item" tabindex="0">
          <div class="statsMetric__Item-value" id="x_of_x_students_frd"></div>
          <div class="statsMetric__Item-label" id="gradee"></div>
        </div>
      </div>
      <div class="studentSelection">
        <button id="prev-student-button" class="Button Button--icon-action gradebookMoveToNext prev" type="button" aria-label="{{#t}}Previous{{/t}}">
          <i class="icon-arrow-left prev" aria-hidden="true"></i>
        </button>
        <% if service_enabled?(:avatars) %>
           <div id="avatar" class="gradebookAvatar">
            <img src="/images/blank.png" id="avatar_image" alt=""/>
          </div>
        <% end %>
        <div id="combo_box_container"></div>
        <button id="next-student-button" class="Button Button--icon-action gradebookMoveToNext next" type="button" aria-label="{{#t}}Next{{/t}}">
          <i class="icon-arrow-right next" aria-hidden="true"></i>
        </button>
      </div>
    </div>
  <% end %>
  </div>
</div>
<div id="moderation_bar">
  <div id="moderation_bar_content">
    <div id="moderation_tabs" class="ui-tabs-minimal">
      <ul>
        <li data-pg-index="0"><a href="#dummy_container">
          <span class="mark_title">{{#t}}1st Reviewer{{/t}}</span>
          <span class="mark_grade"></span>
        </a></li>
        <li data-pg-index="1"><a href="#dummy_container">
          <span class="mark_title">{{#t}}2nd Reviewer{{/t}}</span>
          <span class="mark_grade"></span>
        </a></li>
        <li data-pg-index="final"><a href="#dummy_container">
          <span class="mark_title">{{#t}}Moderator{{/t}}</span>
          <span class="mark_grade"></span>
        </a></li>
      </ul>
      <div id="dummy_container"></div>
    </div>
    <div id="new_mark_container">
      <a id="new_mark_dropdown_link" href="#dummy_container" class="al-trigger" data-popup-within="#full_width_container" tabindex="0">
        {{#t}}Add Review{{/t}}
        <i class="icon-mini-arrow-down"></i>
      </a>
      <ul id="new_mark_dropdown" class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false" aria-activedescendant="new_mark_dropdown_link1">
        <li role="presentation">
          <a href="#" id="new_mark_link" tabindex="-1" role="menuitem">{{#t}}Add 2nd Review{{/t}}</a>
        </li>
        <li role="presentation">
          <a href="#" id="new_mark_final_link" tabindex="-1" role="menuitem">{{#t}}Add Moderator Review (New){{/t}}</a>
        </li>
        <li role="presentation">
          <a href="#" id="new_mark_copy_link1" tabindex="-1" role="menuitem">{{#t}}Add Moderator Review (Copy 1st){{/t}}</a>
        </li>
        <li role="presentation">
          <a href="#" id="new_mark_copy_link2" tabindex="-1" role="menuitem">{{#t}}Add Moderator Review (Copy 2nd){{/t}}</a>
        </li>
      </ul>
    </div>
  </div>
</div>
<div id="enrollment_inactive_notice" class="alert alert-info" style="display: none;">
  <span><%= t "Notice: Inactive Student" %></span>
</div>
<div id="enrollment_concluded_notice" class="alert alert-info" style="display: none;">
  <span><%= t "Notice: Concluded Student" %></span>
</div>
<div id="closed_gp_notice" class="alert alert-info" style="display:none">
  <span><%= t "Notice: The grading period is closed for this student" %></span>
</div>
<div id="full_width_container" style="display:none">
  <div id="left_side" class="full_height">
    <div id="left_side_inner">
      <div id="no_annotation_warning" class="alert speedgrader_alert">
        <a class="dismiss_alert close" href="#">×</a>
        <%= t :no_annotation, "Annotations are not available for this document" %>
      </div>
      <div id="crocodoc_pending" class="alert speedgrader_alert">
        <a class="dismiss_alert close" href="#">×</a>
        <%= t :crocodoc_pending, "Crocodoc is still processing this document." %>
      </div>
      <div id="comment_saved" class="alert alert-success speedgrader_alert">
        <button aria-label="<%= t 'Close' %>" class="dismiss_alert close">×</button>
        <div id="comment_saved_message">
          <%= t 'Your comment was auto-saved as a draft.' %>
        </div>
      </div>
      <div id="comment_submitted" class="alert alert-success speedgrader_alert">
        <button aria-label="<%= t 'Close' %>" class="dismiss_alert close">×</button>
        <div id="comment_submitted_message">
          <%= t :comment_submitted, "Your comment has been submitted." %>
        </div>
      </div>
      <div id='submissions_container'>
        <div id="this_student_does_not_have_a_submission">
          <h3>
            <% if @assignment.grade_as_group? %>
              {{#t}}This group does not have a submission for this assignment{{/t}}
            <% else %>
              {{#t}}This student does not have a submission for this assignment{{/t}}
            <% end %>
          </h3>
        </div>
        <div id="this_student_has_a_submission">
          <h3>
            {{#t}}This student has submitted the assignment{{/t}}
            <span class="subheader">{{#t}}This student's responses are hidden because this assignment is anonymous.{{/t}}</span>
          </h3>
        </div>
        <div id="iframe_holder" style="display:none;"></div>
        <div id="resize_overlay" style="display:none;"></div>
      </div>
    </div>
  </div>
  <div id="right_side" class="full_height">
    <div id="not_gradeable_message">{{#t}}This submission has already been graded and is ready for moderation.{{/t}}</div>
    <div class="full_height" id="width_resizer"></div>
    <div class=right_side_content>
      <div id="rightside_inner" class="full_height">

        <div id="submission_details" class="content_box">
          <div id="multiple_submissions"></div>
          <div id="submission_not_newest_notice" title='{{#t}}use the dropdown above to change which submission to look at") %>'><%= t(:not_newest_notice, "Note: This is not the most recent submission{{/t}}</div>
          <div id="submission_attachment_viewed_at_container"></div>
          <div id="submission_files_container">
            <label>{{#t}}Submitted Files") %>: <span class="labelText--not-bold"><%= t("(click to load){{/t}}</span>&nbsp;</label>
            <div id="submission_files_list">
              <div id="submission_file_hidden"  class="submission-file" style='display:none;'>
                <a class="submission-file-download icon-download" title="{{#t}}Download this file") %>" href="<%= context_url(@context, :context_assignment_submission_url, @assignment.id, "{{submissionId}}", :download => "{{attachmentId}}{{/t}}"></a>
                <span class="turnitin_score_container"></span>
                <a class="display_name no-hover" href="<%= context_url(@context, :context_assignment_submission_url, @assignment.id, "{{submissionId}}", :download => "{{attachmentId}}", :inline => 1) %>" title="{{#t}}Preview this File{{/t}}">???</a>
              </div>
            </div>
            <div class="turnitin_info_container"></div>
          </div>
        </div>

        <div class="content_box">
          <% if @assignment.rubric_association %>
          <a href="<%= context_url(@context, :context_rubric_association_rubric_assessments_url, @assignment.rubric_association) %>" class="update_rubric_assessment_url" style="display: none;">&nbsp;</a>
          <div id="rubric_full" style="display: none;">
            <div id="rubric_full_resizer">
              <div id="rubric_full_resizer_handle"></div>
            </div>
              <h2>{{#t}}Grading{{/t}}</h2>
              <div id="rubric_holder">
                {{> views/shared/rubric}}
                <div class="button-container">
                  <% if can_do(@context, @current_user, :manage_grades) %>
                    <button type="button" class="save_rubric_button Button Button--primary">{{#t}}Save{{/t}}</button>
                  <% end %>
                  <button type="button" class="hide_rubric_link Button">{{#t}}Cancel{{/t}}</button>
                </div>
                <a href="<%= context_url(@context, :context_rubric_association_rubric_assessments_url, @assignment.rubric_association) %>" class="update_rubric_assessment_url" style="display: none;">&nbsp;</a>
                {{> views/shared/rubric_criterion_dialog}}
              </div>
          </div>
          <% end %>

          <% if  @assignment.rubric_association || can_do(@context, @current_user, :manage_grades) || (@context.concluded? && can_do(@context, @current_user, :read_as_admin)) %>
          <div id="grading">
            <h2 class="gradebookHeader--rightside">{{#t}}Assessment{{/t}}</h2>
            <% if can_do(@context, @current_user, :manage_grades) || (@context.concluded? && can_do(@context, @current_user, :read_as_admin)) %>
              <div id="grade_container">
                <%= render partial: "grading_box_extended",
                           locals: { assignment: @assignment } %>
                <span class="turnitin_score_container"></span>
                <a href="#" id="submit_same_score"><br>{{#t}}Use this same grade for the resubmission{{/t}}</a>
                <a style="display: none;" title="POST" href="<%= context_url(@context, :update_submission_context_gradebook_url) %>" class="update_submission_grade_url">&nbsp;</a>
                <div class="turnitin_info_container"></div>
              </div>
            <% end %>
            <% if @assignment.rubric_association %>
              <div id="rubric_summary_holder">
                <div id="rubric_assessments_list_and_edit_button_holder">
                  <span id="rubric_assessments_list">
                    <%= before_label(:show_assessment_by, "Show Assessment By") %>
                    <select id="rubric_assessments_select"></select>
                  </span>
                </div>
                <div id="rubric_summary_container">
                  {{> views/shared/rubric_summary}}
                </div>
              </div>
            <% end %>
          </div><!-- end #grading -->
          <% end %>
        </div>

        <div class="content_box">
          <h2>{{#t}}Assignment Comments{{/t}}</h2>
          <div id="discussion">
            <div id="comments">
              <div class="comment" id="comment_blank" style="display: none;">
                <div class="comment_flex">
                  <img src="" class="avatar" alt="" style="display: none;"/>
                  <span class="draft-marker" aria-label="{{#t}}Draft comment{{/t}}">*</span>
                  <span class="comment"></span>
                  <button class="submit_comment_button">
                    <span>{{#t}}Submit{{/t}}</span>
                  </button>
                  <a href="javascript:void 0;" class="delete_comment_link icon-x">
                    
                  </a>
                </div>
                <a href="#" class="play_comment_link media-comment" style="display:none;">{{#t}}click here to view{{/t}}</a>
                <div class="media_comment_content" style="display:none"></div>
                <div class="comment_attachments"></div>
                <div class="comment_citation">
                  <span class="author_name">&nbsp;</span>,
                  <span class="posted_at">&nbsp;</span>
                </div>
              </div>
              <div class="comment_attachment" id="comment_attachment_blank" style="display: none;">
                <a href="<%= context_url(@context, :context_assignment_submission_url, @assignment.id, "{{ submitter_id }}", :comment_id => "{{ comment_id }}", :download => "{{ id }}") %>"><span class="display_name">&nbsp;</span></a>
              </div>
            </div>
          </div>

          <% unless @context.completed? || @context_enrollment.try(:completed?) %>
            <form id="add_a_comment">
              <label for="speedgrader_comment_textarea" class="screenreader-only">{{#t}}Add a Comment{{/t}}</label>
              <textarea id="speedgrader_comment_textarea" class="ic-Input" placeholder="{{#t}}Add a Comment{{/t}}"></textarea>
              <div id="media_media_recording" style="display: none;">
                <div class="media_recording"></div>
              </div>
              <% if @assignment.has_group_category? %>
                <div id="group_comment_wrapper" class="ic-Form-control ic-Form-control--checkbox">
                  <input type="checkbox" name="group_comment" id="submission_group_comment" class="ic_Input"/>
                  <label for="submission_group_comment" class="ic-Label">{{#t}}Send Comment to the Whole Group{{/t}}</label>
                </div>
              <% end %>

              <div id="comment_attachments"></div>
              <div class="comment_attachment_input" id="comment_attachment_input_blank" style="display: none;">
                <input type="file" name="attachments[-1][uploaded_data]"/>
                <a href="#">
                  <i class="icon-end text-error"></i>
                  <span class="screenreader-only">
                    {{#t}}Remove Attachment{{/t}}
                  </span>
                </a>
              </div>
              <div class="ic-Action-header">
                <div class="ic-Action-header__Primary attach_things" role="group" aria-labelledby="speedgrader_attach_things_label">
                  <button class="Button Button--small" id="add_attachment" title="{{#t}}File Attachment{{/t}}" type="button">
                    <i class="icon-paperclip" aria-hidden="true"></i>
                    <span class="screenreader-only">
                      {{#t}}File Attachment{{/t}}
                    </span>
                  </button>
                  <% if feature_enabled?(:kaltura) %>
                    <button id="media_comment_button" class="Button Button--small media_comment_link" title="{{#t}}Media Comment{{/t}} " type="button">
                      <i class="icon-media" aria-hidden="true"></i>
                      <span class="screenreader-only">
                        {{#t}}Media Comment{{/t}}
                      </span>
                    </button>
                  <% end %>
                  <div class="speech-recognition" style="display:none">
                    <a id="speech_recognition_button" title="{{#t}}Speech Recognition{{/t}}" href="#" class="Button Button--small speech_recognition_link">
                      <i class="icon-audio"></i>
                      <span class="screenreader-only">
                        {{#t}}Speech Recognition{{/t}}
                      </span>
                    </a>
                  </div>
                </div>
                <div class="ic-Action-header__Secondary">
                  <button id="comment_submit_button" class="Button Button--primary" type="submit">{{#t}}Submit{{/t}}</button>
                </div>
              </div>
            </form>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>
<a style="display:none;" id="assignment_submission_url" href="<%= context_url(@context, :context_assignment_submission_url, @assignment.id, "{{submission_id}}") %>"></a>
<a style="display:none;" id="assignment_submission_turnitin_report_url" href="<%= context_url(@context, :context_assignment_submission_turnitin_report_url, @assignment.id, "{{ user_id }}", "{{ asset_string }}") %>"></a>
<a style="display:none;" id="assignment_submission_originality_report_url" href="<%= context_url(@context, :context_assignment_submission_originality_report_url, @assignment.id, "{{ user_id }}", "{{ asset_string }}")%>"></a>
<a style="display:none;" id="assignment_submission_resubmit_to_turnitin_url" href="<%= context_url(@context, :context_assignment_submission_resubmit_to_turnitin_url, @assignment.id, "{{ user_id }}") %>"></a>
<a style="display:none;" id="assignment_submission_vericite_report_url" href="<%= context_url(@context, :context_assignment_submission_vericite_report_url, @assignment.id, "{{ user_id }}", "{{ asset_string }}") %>"></a>
<a style="display:none;" id="assignment_submission_resubmit_to_vericite_url" href="<%= context_url(@context, :context_assignment_submission_resubmit_to_vericite_url, @assignment.id, "{{ user_id }}") %>"></a>
<form id="settings_form" style="display:none; width:400px;" title="{{#t}}SpeedGrader Options{{/t}}">
  <p>
    <label for="eg_sort_by">{{#t}}Sort student list{{/t}}</label>
    <%= select_tag 'eg_sort_by', options_for_select([
      [t('sort_by.student_name', "by student name (alphabetically)"), "alphabetically"],
      [t('sort_by.submitted_at', "the date they submitted the assignment"), "submitted_at"],
      [t('sort_by.status', "by submission status (needs grading, not submitted, etc)"), "submission_status"]], cookies[:eg_sort_by]) %>
  </p>

  <p>
    <input type="checkbox" id="hide_student_names" name="hide_student_names"
      <% if force_anonymous_grading?(@assignment) %>disabled<% end %>
    />
    <label for="hide_student_names">
      {{#t}}Hide student names in the SpeedGrader{{/t}}
    </label>
    <% if force_anonymous_grading?(@assignment) %>
      <i class="icon-info" aria-hidden="true"
        data-tooltip='{"tooltipClass":"popover popover-padded", "position":"top"}'
        title="<%= force_anonymous_grading_reason(@assignment) %>"></i>
      
    <% end %>
  </p>
  <p <% unless @assignment.quiz %>class=hidden<% end %>>
    <%= check_box_tag :enable_speedgrader_grade_by_question, "1",
      @current_user.preferences[:enable_speedgrader_grade_by_question] %>
    <%= label_tag :enable_speedgrader_grade_by_question,
      t('labels.grade_by_question_beta', 'Grade by question (beta)') %>
  </p>

  <div class="button-container">
    <button class="btn dialog_closer">{{#t}}Cancel{{/t}}</button>
    <button type="submit" class="btn btn-primary submit_button">{{#t}}Save Settings{{/t}}</button>
  </div>
</form>
{{> views/shared/mute_dialog}}
{{> views/shared/unmute_dialog}}
<ul id="section-menu" class="ui-selectmenu-menu ui-widget ui-widget-content ui-selectmenu-menu-dropdown ui-selectmenu-open" style="display:none;" role="listbox" aria-activedescendant="section-menu-link">
  <li role="presentation" class="ui-selectmenu-item">
    <a href="#" tabindex="-1" role="option" aria-selected="true" id="section-menu-link">
      <span><%= before_label(:showing, "Showing") %> <span id="section_currently_showing">{{#t}}All Sections{{/t}}</span></span>
    </a>
    <ul>
      <li><a class="selected" data-section-id="all" href="#">{{#t}}Show All Sections{{/t}}</a></li>
    </ul>
  </li>
</ul>

<span id="aria_name_alert" class="screenreader-only" aria-live="polite"></span>
<% keyboard_navigation([
  {:key => t('keycodes.next_student', 'j'), :description => t('keycode_descriptions.next_student', 'Next Student')},
  {:key => t('keycodes.previous_student', 'k'), :description => t('keycode_descriptions.previous_student', 'Previous Student')},
  {:key => t('keycodes.leave_comment', 'c'), :description => t('keycode_descriptions.leave_comment', 'Leave Comment')},
  {:key => t('keycodes.change_grade', 'g'), :description => t('keycode_descriptions.change_grade', 'Change Grade')},
  {:key => t('keycodes.use_rubric', 'r'), :description => t('keycode_descriptions.use_rubric', 'Use Rubric')}
]) %>
